<template>
  <div class="resume-analysis">
    <div class="page-header">
      <h1 class="page-title">简历分析</h1>
      <div class="header-buttons">
        <button class="back-btn" @click="goBack">返回首页</button>
      </div>
    </div>
    
    <div class="analysis-content">
      <div class="upload-section">
        <div class="upload-panel">
          <div class="panel-title">上传简历</div>
          <div class="upload-area" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
            <input type="file" ref="fileInput" @change="handleFileUpload" accept=".pdf,.doc,.docx" style="display: none;">
            <div v-if="!uploadedFileName">
            <div class="upload-icon">📄</div>
            <p>点击或拖拽上传简历</p>
            <p class="upload-hint">支持 PDF、DOC、DOCX 格式</p>
          </div>
            <div v-else class="uploaded-preview">
              <img :src="fileImageSrc" class="file-image-icon" alt="file type" />
              <p class="file-name-large">{{ uploadedFileName }}</p>
            </div>
          </div>
          <div v-if="uploading || (taskId && taskStatus === 1)" class="task-status">
            <div v-if="uploading" class="progress">
              <span>正在上传并解析...</span>
            </div>
            <div v-else class="progress">
              <span>简历正在分析中...</span>
            </div>
          </div>
        </div>
      </div>
      <div class="result-panel" v-if="evaluation">
        <div class="panel-title">测评报告</div>
        <div class="score-display">
          <div class="score-circle">
            <div class="score">{{ Math.round(evaluation.overallScore || 0) }}</div>
            <div class="score-label">综合评分</div>
          </div>
          <div class="score-details">
        <div class="section">
              <div class="suggestions">
                <div class="suggestion-item">{{ evaluation.gapAnalysis || '暂无技能差距分析' }}</div>
              </div>
            </div>
        <div class="section">
              <div class="suggestions">
                <div class="suggestion-item">技能关键词：{{ evaluationKeywordsLine || '暂无关键词' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="result-panel" v-if="similarityReport">
        <div class="panel-title">相似度报告</div>
        <div class="score-display">
          <div class="score-circle">
            <div class="score">{{ Math.round(similarityReport.overallScore || 0) }}</div>
            <div class="score-label">相似度总分</div>
          </div>
          <div class="score-details">
            <div class="section">
              <div class="suggestions">
                <div class="suggestion-item">高相似覆盖率：{{ ((similarityReport.coverage || 0)*100).toFixed(1) }}%</div>
              </div>
            </div>
            <div class="section">
              <div class="suggestions">
                <div class="suggestion-item">平均最高相似度：{{ ((similarityReport.avgTopSim || 0)*100).toFixed(1) }}%</div>
              </div>
            </div>
            <div class="section">
              <div class="suggestions">
                <div class="suggestion-item">风险等级：{{ similarityReport.riskLevel || 'LOW' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="result-panel" v-if="optimization">
        <div class="panel-title">简历优化建议</div>
        <div class="section">
          <div class="suggestions">
            <div class="suggestion-item" v-if="optimization.educationSuggestions">教育：{{ optimization.educationSuggestions }}</div>
            <div class="suggestion-item" v-if="optimization.skillsSuggestions">技能：{{ optimization.skillsSuggestions }}</div>
            <div class="suggestion-item" v-if="optimization.awardsSuggestions">奖项：{{ optimization.awardsSuggestions }}</div>
            <div class="suggestion-item" v-if="optimization.internshipsSuggestions">实习：{{ optimization.internshipsSuggestions }}</div>
            <div class="suggestion-item" v-if="optimization.projectsSuggestions">项目：{{ optimization.projectsSuggestions }}</div>
      </div>
        </div>
      </div>

      
      
    </div>
  </div>
</template>

<script>
import { uploadResume, getTaskStatus, getParseResult, startEvaluation, getEvaluationReportById, startOptimization, getOptimizationById, getLatestAnalysisByUser, getSimilarityReport } from '@/api/resumeApi'
import { getUserId } from '@/utils/auth'
export default {
  name: 'ResumeAnalysis',
  data() {
    return {
      analysisData: null,
      parseResult: null,
      uploading: false,
      taskId: '',
      taskTimer: null,
      autoRefreshTimer: null, // 自动刷新定时器
      taskProgress: 0,
      taskStatus: 0,
      resumeId: null,
      evaluating: false,
      evaluation: null,
      optimizing: false,
      optimization: null,
      similarityReport: null,
      loadingSim: false,
      uploadedFileName: '',
      uploadedFileType: ''
    }
  },
  async mounted() {
    // 刷新或返回页面时，尝试恢复最近一次结果
    const userId = getUserId()
    if (!userId) return
    try {
      const r = await getLatestAnalysisByUser(userId)
      if (r && r.code === 200 && r.data) {
        const data = r.data
        console.log('获取到的最新分析数据:', data) // 调试日志
        
        if (data.resumeId) {
          this.resumeId = data.resumeId
          // 文件名与类型用于显示图标
          this.uploadedFileName = data.originalFileName || ''
          // 获取相似度报告
          this.fetchSimilarity(this.resumeId)
        }
        
        // 处理测评报告数据
        if (data.evaluation) {
          this.evaluation = data.evaluation
        } else if (data.evaluationReportId) {
          // 如果有测评报告ID，尝试获取详细数据
          try {
            const evalRes = await getEvaluationReportById(data.evaluationReportId)
            if (evalRes.code === 200) {
              this.evaluation = evalRes.data
            }
          } catch (e) {
            console.error('获取测评报告失败:', e)
          }
        }
        
        // 处理优化建议数据
        if (data.optimization) {
          this.optimization = data.optimization
        } else if (data.optimizationId) {
          // 如果有优化建议ID，尝试获取详细数据
          try {
            const optRes = await getOptimizationById(data.optimizationId)
            if (optRes.code === 200) {
              this.optimization = optRes.data
            }
          } catch (e) {
            console.error('获取优化建议失败:', e)
          }
        }
        
        // 处理解析结果数据
        if (data.parseResult) {
          this.parseResult = data.parseResult
        }
        
        console.log('处理后的数据:', {
          evaluation: this.evaluation,
          optimization: this.optimization,
          parseResult: this.parseResult
        })
      }
      
      // 启动定时自动刷新（每30秒检查一次是否有新数据）
      this.startAutoRefresh()
    } catch (e) {
      console.error('获取最新分析数据失败:', e)
    }
  },
  beforeDestroy() {
    // 清理定时器
    if (this.taskTimer) {
      clearInterval(this.taskTimer)
      this.taskTimer = null
    }
    if (this.autoRefreshTimer) {
      clearInterval(this.autoRefreshTimer)
      this.autoRefreshTimer = null
    }
  },
  computed: {
    fileImageSrc() {
      const name = (this.uploadedFileName || '').toLowerCase()
      if (name.endsWith('.pdf')) return require('@/assets/images/pdf.png')
      if (name.endsWith('.doc') || name.endsWith('.docx')) return require('@/assets/images/docx.png')
      return require('@/assets/images/docx.png')
    },
    fileIcon() {
      const name = (this.uploadedFileName || '').toLowerCase()
      if (name.endsWith('.pdf')) return '📕'
      if (name.endsWith('.doc') || name.endsWith('.docx')) return '📝'
      return '📄'
    },
    evaluationKeywords() {
      const raw = this.evaluation && this.evaluation.keywords
      const tokens = []
      const pushTokens = (text) => {
        if (typeof text !== 'string') return
        const parts = text.split(/[，,；;\/|、\n\t\s]+/).map(s => s.trim()).filter(Boolean)
        tokens.push(...parts)
      }
      if (!raw) return []
      if (Array.isArray(raw)) {
        raw.forEach(item => {
          if (typeof item === 'string') pushTokens(item)
          else if (item && typeof item === 'object') {
            if (typeof item.name === 'string') pushTokens(item.name)
            if (typeof item.keyword === 'string') pushTokens(item.keyword)
          }
        })
      } else if (typeof raw === 'string') {
        pushTokens(raw)
      }
      const seen = new Set()
      const result = []
      for (const t of tokens) {
        const key = t.toLowerCase()
        if (!seen.has(key)) {
          seen.add(key)
          result.push(t)
        }
        if (result.length >= 50) break
      }
      return result
    },
    evaluationKeywordsLine() {
      const list = this.evaluationKeywords || []
      return list.join('，')
    }
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
    triggerFileUpload() {
      this.$refs.fileInput.click()
    },
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        this.analyzeResume(file)
      }
    },
    handleFileDrop(event) {
      const file = event.dataTransfer.files[0]
      if (file) {
        this.analyzeResume(file)
      }
    },
    async analyzeResume(file) {
      try {
        const userId = getUserId()
        if (!userId) {
          this.$message && this.$message.error('请先登录')
          return
        }
        
        // 上传新简历时，立即清空前端显示的数据
        this.clearDisplayData()
        console.log('上传新简历，清空前端显示数据')
        
        this.uploadedFileName = file && file.name || ''
        this.uploadedFileType = file && file.type || ''
        this.uploading = true
        this.taskProgress = 0
        this.taskStatus = 0
        const res = await uploadResume(userId, file)
        if (res.code !== 200) {
          this.uploading = false
          this.$message && this.$message.error(res.msg || '上传失败')
          return
        }
        this.taskId = res.data
        this.startPolling()
      } catch (e) {
        this.$message && this.$message.error('上传或解析异常')
        this.uploading = false
      }
    },
    startPolling() {
      if (this.taskTimer) clearInterval(this.taskTimer)
      const poll = async () => {
        try {
          const r = await getTaskStatus(this.taskId)
          if (r.code !== 200 || !r.data) return
          this.taskStatus = r.data.status
          this.taskProgress = r.data.progress ?? 0
          // 约定：成功时resultData里包含resumeId（如果后端返回）
          if (this.taskStatus === 2) {
            clearInterval(this.taskTimer)
            this.taskTimer = null
            this.uploading = false
            const resumeId = r.data.resultData?.resumeId || r.data.resumeId
            if (resumeId) {
              this.resumeId = resumeId
              const pr = await getParseResult(this.resumeId)
              if (pr.code === 200) {
                this.parseResult = pr.data
                this.analysisData = this.mockAnalysisFromParse(pr.data)
              }
              // 获取相似度报告
              this.fetchSimilarity(this.resumeId)
              // 自动启动测评与优化
              this.onStartEvaluation()
              this.onStartOptimization()
            }
          } else if (this.taskStatus === 3) {
            clearInterval(this.taskTimer)
            this.taskTimer = null
            this.uploading = false
            this.$message && this.$message.error(r.data?.errorMessage || '解析失败')
          }
        } catch (e) {}
      }
      this.taskTimer = setInterval(poll, 2000)
    },
    async fetchSimilarity(resumeId) {
      if (!resumeId) return
      try {
        this.loadingSim = true
        const r = await getSimilarityReport(resumeId, 5, 0.9)
        if (r && r.code === 200) {
          this.similarityReport = r.data
        } else if (r && r.code === 1 && r.data) { // 兼容另一种Result结构
          this.similarityReport = r.data
        }
      } catch (e) {
        console.error('获取相似度报告失败', e)
      } finally {
        this.loadingSim = false
      }
    },
    mockAnalysisFromParse(parseData) {
      // 根据解析结果粗略构造一个评分与建议（占位展示）
      return {
        score: 85,
        skillMatch: 88,
        experienceMatch: 82,
        educationMatch: 85,
        advantages: ['具备丰富的前端开发经验', '熟练掌握Vue.js和React框架', '有大型项目开发经验', '具备良好的团队协作能力'],
        suggestions: ['建议增加后端技能，如Node.js', '可以学习更多云计算相关技术', '建议获得相关技术认证', '增加开源项目贡献经历'],
        recommendedJobs: [
          { title: '高级前端工程师', company: '互联网公司A', salary: '25-35K', match: 92 },
          { title: '全栈开发工程师', company: '互联网公司B', salary: '30-40K', match: 85 },
          { title: 'Vue.js开发专家', company: '互联网公司C', salary: '28-38K', match: 90 }
        ]
      }
    },
    async onStartEvaluation() {
      if (!this.resumeId) return
      try {
        this.evaluating = true
        const userId = getUserId()
        const r = await startEvaluation(userId, this.resumeId)
        if (r.code !== 200) {
          this.$message && this.$message.error(r.msg || '启动测评失败')
          this.evaluating = false
          return
        }
        const evalTaskId = r.data
        // 复用简易轮询：拿到报告ID后再取报告
        const timer = setInterval(async () => {
          const ts = await getTaskStatus(evalTaskId)
          if (ts.data?.status === 2) {
            clearInterval(timer)
            const reportId = ts.data?.resultData?.reportId || ts.data?.reportId
            if (reportId) {
              const rr = await getEvaluationReportById(reportId)
              if (rr.code === 200) {
                this.evaluation = rr.data
                console.log('测评完成，获取到测评报告:', this.evaluation)
                
                // 测评完成后，自动刷新最新数据
                this.autoRefreshLatestData()
              }
            }
            this.evaluating = false
          } else if (ts.data?.status === 3) {
            clearInterval(timer)
            this.$message && this.$message.error(ts.data?.errorMessage || '测评失败')
            this.evaluating = false
          }
        }, 2000)
      } catch (e) {
        this.$message && this.$message.error('测评异常')
        this.evaluating = false
      }
    },
    async onStartOptimization() {
      if (!this.resumeId) return
      try {
        this.optimizing = true
        const userId = getUserId()
        const r = await startOptimization(userId, this.resumeId)
        if (r.code !== 200) {
          this.$message && this.$message.error(r.msg || '启动优化失败')
          this.optimizing = false
          return
        }
        const optTaskId = r.data
        const timer = setInterval(async () => {
          const ts = await getTaskStatus(optTaskId)
          if (ts.data?.status === 2) {
            clearInterval(timer)
            const optimizationId = ts.data?.resultData?.optimizationId || ts.data?.optimizationId
            if (optimizationId) {
              const rr = await getOptimizationById(optimizationId)
              if (rr.code === 200) {
                this.optimization = rr.data
                console.log('优化建议完成，获取到优化建议:', this.optimization)
                
                // 优化建议完成后，自动刷新最新数据
                this.autoRefreshLatestData()
              }
            }
            this.optimizing = false
          } else if (ts.data?.status === 3) {
            clearInterval(timer)
            this.$message && this.$message.error(ts.data?.errorMessage || '生成优化建议失败')
            this.optimizing = false
          }
        }, 2000)
      } catch (e) {
        this.$message && this.$message.error('生成优化建议异常')
        this.optimizing = false
      }
    },
    pretty(obj) {
      try { return JSON.stringify(obj, null, 2) } catch { return String(obj) }
    },
    
    /**
     * 刷新最新数据
     */
    async refreshLatestData() {
      const userId = getUserId()
      if (!userId) return
      
      try {
        console.log('刷新最新数据...')
        const r = await getLatestAnalysisByUser(userId)
        if (r && r.code === 200 && r.data) {
          const data = r.data
          console.log('刷新获取到的最新分析数据:', data)
          
          if (data.resumeId) {
            this.resumeId = data.resumeId
            this.uploadedFileName = data.originalFileName || ''
          }
          
          // 处理测评报告数据
          if (data.evaluation) {
            this.evaluation = data.evaluation
          } else if (data.evaluationReportId) {
            try {
              const evalRes = await getEvaluationReportById(data.evaluationReportId)
              if (evalRes.code === 200) {
                this.evaluation = evalRes.data
              }
            } catch (e) {
              console.error('获取测评报告失败:', e)
            }
          }
          
          // 处理优化建议数据
          if (data.optimization) {
            this.optimization = data.optimization
          } else if (data.optimizationId) {
            try {
              const optRes = await getOptimizationById(data.optimizationId)
              if (optRes.code === 200) {
                this.optimization = optRes.data
              }
            } catch (e) {
              console.error('获取优化建议失败:', e)
            }
          }
          
          // 处理解析结果数据
          if (data.parseResult) {
            this.parseResult = data.parseResult
          }
          
          console.log('刷新后的数据:', {
            evaluation: this.evaluation,
            optimization: this.optimization,
            parseResult: this.parseResult
          })
        }
      } catch (e) {
        console.error('刷新最新分析数据失败:', e)
      }
    },
    /**
     * 自动刷新最新数据
     * 在测评或优化完成后自动调用，确保前端显示最新结果
     */
    async autoRefreshLatestData() {
      try {
        console.log('开始自动刷新最新数据...')
        await this.refreshLatestData()
        
        // 显示刷新成功提示
        if (this.$message) {
          this.$message.success('数据已自动刷新')
        }
        
        console.log('自动刷新完成')
      } catch (e) {
        console.error('自动刷新失败:', e)
        if (this.$message) {
          this.$message.warning('自动刷新失败，请手动刷新')
        }
      }
    },
    /**
     * 启动定时自动刷新
     * 每30秒检查一次是否有新数据
     */
    startAutoRefresh() {
      if (this.autoRefreshTimer) clearInterval(this.autoRefreshTimer) // 使用不同的定时器变量
      const poll = async () => {
        try {
          const userId = getUserId()
          if (!userId) return
          const r = await getLatestAnalysisByUser(userId)
          
          if (r && r.code === 200 && r.data) {
            const data = r.data
            
            // 检查是否有新的简历ID（表示上传了新简历）
            if (data.resumeId && data.resumeId !== this.resumeId) {
              console.log('检测到新简历上传，清空旧数据')
              this.clearDisplayData()
              this.resumeId = data.resumeId
              this.uploadedFileName = data.originalFileName || ''
            }
            
            // 检查测评报告状态
            if (data.evaluation) {
              this.evaluation = data.evaluation
            } else if (data.evaluationReportId) {
              try {
                const evalRes = await getEvaluationReportById(data.evaluationReportId)
                if (evalRes.code === 200) {
                  this.evaluation = evalRes.data
                }
              } catch (e) {
                console.error('获取测评报告失败:', e)
              }
            } else {
              // 如果没有测评报告，清空显示
              this.evaluation = null
            }
            
            // 检查优化建议状态
            if (data.optimization) {
              this.optimization = data.optimization
            } else if (data.optimizationId) {
              try {
                const optRes = await getOptimizationById(data.optimizationId)
                if (optRes.code === 200) {
                  this.optimization = optRes.data
                }
              } catch (e) {
                console.error('获取优化建议失败:', e)
              }
            } else {
              // 如果没有优化建议，清空显示
              this.optimization = null
            }
            
            // 检查解析结果状态
            if (data.parseResult) {
              this.parseResult = data.parseResult
            } else {
              // 如果没有解析结果，清空显示
              this.parseResult = null
            }
            
            console.log('自动刷新获取到的最新分析数据:', data)
          } else {
            // 如果后端没有数据，说明缓存被清空，清空前端显示
            console.log('后端缓存被清空，清空前端显示数据')
            this.clearDisplayData()
          }
        } catch (e) {
          console.error('自动刷新失败:', e)
        }
      }
      this.autoRefreshTimer = setInterval(poll, 30000) // 每30秒检查一次
    },
    
    /**
     * 清空前端显示的数据
     */
    clearDisplayData() {
      this.evaluation = null
      this.optimization = null
      this.parseResult = null
      this.similarityReport = null
      console.log('前端显示数据已清空')
    }
  }
}
</script>

<style scoped>
.resume-analysis {
  min-height: 100vh;
  height: 100vh;
  background: #010e50 url(@/assets/images/bg.jpg) center top no-repeat;
  background-size: 100% auto;
  color: #fff;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.refresh-btn {
  padding: 0.8rem 1.2rem;
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.3), rgba(0, 35, 120, 0.5));
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.5rem; /* Adjust font size for the refresh button */
}

.refresh-btn:hover {
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.5), rgba(0, 35, 120, 0.7));
  border-color: #0258f0;
}

.back-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.3), rgba(0, 35, 120, 0.5));
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.5), rgba(0, 35, 120, 0.7));
  border-color: #0258f0;
}

.analysis-content {
  display: grid;
  gap: 2rem;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 2rem;
}

.upload-section {
  margin-bottom: 2rem;
}

.upload-panel, .result-panel {
  background: rgba(0, 35, 120, 0.36);
  border: 1px solid rgba(100, 162, 255, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  margin-bottom: 1.5rem;
}

.upload-panel::before, .result-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 30px;
  border-left: 1px solid #0258f0;
  border-top: 1px solid #0258f0;
}

.upload-panel::after, .result-panel::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 20px;
  height: 30px;
  border-right: 1px solid #0258f0;
  border-bottom: 1px solid #0258f0;
}

.panel-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(2, 88, 240, 0.4);
}

.upload-area {
  border: 2px dashed rgba(100, 162, 255, 0.4);
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #0258f0;
  background: rgba(2, 88, 240, 0.1);
}

.upload-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.upload-hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.uploaded-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.file-image-icon { width: 36px; height: 36px; }
.file-name-large { font-size: 1rem; color: rgba(255,255,255,0.95); }

.task-status { margin-top: 12px; color: rgba(255,255,255,0.85); }
.progress { margin-top: 6px; font-size: 14px; }
.actions { margin-top: 12px; display: flex; gap: 10px; }
.primary {
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.3), rgba(0, 35, 120, 0.5));
  border: 1px solid rgba(100, 162, 255, 0.4);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

.file-info {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
}
.file-icon { font-size: 18px; }
.file-name { font-size: 14px; }

.score-display {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.score-circle {
  width: 120px;
  height: 120px;
  border: 3px solid #0258f0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(2, 88, 240, 0.1);
}

.score {
  font-size: 2.5rem;
  font-weight: bold;
  color: #0258f0;
}

.score-label {
  font-size: 1rem;
  color: #64a2ff;
}

.score-details {
  flex: 1;
}

.score-details .section {
  margin-bottom: 1rem;
}

.score-details .section:last-child {
  margin-bottom: 0;
}

.score-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  background: rgba(2, 88, 240, 0.1);
  border-radius: 4px;
}

.label {
  color: rgba(255, 255, 255, 0.8);
}

.value {
  color: #0258f0;
  font-weight: bold;
}

.advantages, .suggestions {
  display: grid;
  gap: 0.8rem;
}

.advantage-item, .suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: rgba(2, 88, 240, 0.1);
  border-radius: 6px;
}

.advantage-icon {
  color: #4CAF50;
  font-weight: bold;
}

.suggestion-icon {
  color: #FFC107;
}

.recommended-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.job-item {
  padding: 1.2rem;
  background: rgba(2, 88, 240, 0.1);
  border: 1px solid rgba(100, 162, 255, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.job-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 88, 240, 0.3);
}

.job-item h4 {
  color: #64a2ff;
  margin-bottom: 0.5rem;
}

.company {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.3rem;
}

.salary {
  color: #0258f0;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.match {
  color: #4CAF50;
  font-weight: 500;
}

.json-view {
  white-space: pre-wrap;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(100, 162, 255, 0.2);
  padding: 12px;
  border-radius: 6px;
}

.keywords-line {
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

/* 自定义滚动条样式 - 与主题风格匹配 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 35, 120, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.6), rgba(100, 162, 255, 0.8));
  border-radius: 4px;
  border: 1px solid rgba(2, 88, 240, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(2, 88, 240, 0.8), rgba(100, 162, 255, 1));
}

::-webkit-scrollbar-corner {
  background: rgba(0, 35, 120, 0.2);
}

/* Firefox 滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(2, 88, 240, 0.6) rgba(0, 35, 120, 0.2);
}

</style>
